<template>
    <div>
         <nav class="nav"><span class="back" @click="$router - back()"></span></nav>
    <div class="top">
      <span>
        <van-icon name="arrow-left" />
      </span>
      <h3>地图找房</h3>
    </div>
    <!-- 地图 -->
    <div class="m-map">
        <!-- 放地图 -->
        <baidu-map class="m-map" :center="center" :zoom="zoom" @ready="initMap">
          <bm-marker
            :position="{ lng: 121.480539, lat: 31.2359295 }"
            :dragging="true"
            @click="clickFn"
          >
            <!-- <bm-label content="我爱北京天安门" :labelStyle="{color: 'red', fontSize : '24px'}" :offset="{width: -35, height: 30}"/> -->
          </bm-marker>
          <!-- 覆盖物  遍历v-for-->
          <bm-overlay 
          v-for="(item,index) in list"
          :key="index"
          pane="labelPane" 
          class="sample" 
          @draw="draw($event,item.coord)" >
          <span>{{item.label}}{{item.count}}房子</span>
          </bm-overlay>
        </baidu-map>
        <!-- <img src="@/assets/img.jpg" alt="" /> -->
      </div>
    </div>
</template>

<script>
import axios from 'axios';
export default {
    name: 'HouseMaphouse',

    data() {
        return {
            center:'上海',
            zoom:15,
            list:[]
        };
    },

    mounted() {
        this.getCitylist()
    },

    methods: {
         clickFn(e) {
      console.log(e.point);
    },
          // 自定义覆盖物仅在地图发生变化时触发 draw 方法重绘覆盖物视图
    draw({ el, BMap, map },{longitude, latitude}) {
      // https://lbsyun.baidu.com/cms/jsapi/reference/jsapi_reference.html
      // new BMap.Point
      // 以指定的经度和纬度创建一个地理点坐标
      const pixel = map.pointToOverlayPixel(new BMap.Point(longitude, latitude));
      // 根据地理坐标获取对应的覆盖物容器的坐标，此方法用于自定义覆盖物
      // console.log(pixel);
      // {x: 389, y: 300}
      el.style.left = pixel.x - 60 + "px";
      el.style.top = pixel.y - 20 + "px";
    },
    initMap({ BMap, map }) {
      const myGeo = new BMap.Geocoder();
      myGeo.getPoint(
        "上海人民广场",
        function (point) {
          if (point) {
            console.log(point);
            map.centerAndZoom(point, 11);
          }
        },
        "上海人民广场"
      );
    },
  async  getCitylist(){
    const res =   await axios({
        url:'http://liufusong.top:8080/area/map?id=AREA%7Cdbf46d32-7e76-1196'
      })
      console.log(res.data.body);
      this.list = res.data.body
    }
    },
};
</script>

<style lang="less" scoped>
 // 顶部
  .top {
    display: flex;
    height: 45px;
    background-color: #21b97a;
    color: #fff;

    span {
      line-height: 40px;
      font-size: 18px;
      padding-left: 15px;
    }
    h3 {
      line-height: 9px;
      margin: auto;
      font-weight: 400;
      font-size: 16px;
    }
  }
  //地图
   .m-map {
      height: 600px;
      width: 100%;
      .sample {
        width: 35px;
        height: 35px;
        line-height: 40px;
        font-size: 10px;
        background:green;
        overflow: hidden;
        color: #fff;
        text-align: center;
        border-radius: 50%;
        position: absolute;
      }
      // img {
      //   width: 100%;
      //   height: 100%;
      // }
    }
</style>